<template>
	
	
	
	<div id="test">
		<!-- 左半部分 -->
		<aside>
			<!-- logo -->
			<div class="logo-c">
				<!-- <img src="../assets/imgs/logo.png" alt="logo" class="logo"> -->
				<span>我的云空间</span>
				<el-button type="primary" @click=logout>退出</el-button>
				<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
					开始演示模态框
				</button>
			</div>
			<!-- 菜单栏 -->
			<!-- <Menu class="menu" theme="dark" width="100%">

		    </Menu> -->
		</aside>


		<!-- 右半部分 -->
		<section class="sec-right">

			<h1>我的空间</h1>
			<!-- <button @click="submit(fileName)">测试按钮-获取</button>
			<button @click="back">返回上一级</button> -->

			<!-- 上传下载区域 -->
			<el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
			 multiple :limit="3" :on-exceed="handleExceed">
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" class="el-upload__tip">只能上传小文件，且不超过50MB</div>
			</el-upload>


			<!-- 横着的目录 -->
			<div class="div-tags">


				<ul class="ul-c">

					<li>
						<el-button type="primary" style="float: left;" @click="newFileFolder">新建文件夹</el-button>

						<!-- <div>
							<input type="text">
							<el-button size="small" type="primary">确认</el-button>
							<el-button size="small" type="primary">取消</el-button>
						</div> -->

					</li>
					<li>
						<div @click="back">返回上一级</div>
						<span>|</span>
						<div @click="submit(fileName)">全部文件</div>
					</li>


					<li v-for="($index,data) in index2">
						<a @click="jump($index,data)">
							<span>></span>
							<span>{{$index}}</span>
						</a>
					</li>


				</ul>


			</div>

			<!-- 结构主体 -->
			<div class="main-content">
				<div class="view-c">

					<table cellspacing="20" cellpadding="30">

						<tr v-model="showMenu" v-if="showMenu">
							<th></th>
							<th align="left">文件名</th>
							<th>创建日期</th>
							<th>大小</th>
						</tr>

						<tr v-for="data in index">
							<td><input type="checkbox"></td>

							<!-- 拖动 -->
							<div draggable="true" @dragstart="dragstart($event,data)" @drop="drop($event,data)" @dragover="allowDrop($event)">
								<td @click="submit(data.FileName)">
									<p>{{data.FileName}}</p>
								</td>
							</div>

							<td>{{data.Filetime}}</td>
							<td>{{data.FileSize}}</td>
							<td>
								<el-button type="primary" style="float: left;">下载</el-button>
							</td>
							<td>
								<el-button type="primary" style="float: left;">删除</el-button>
							</td>

						</tr>


					</table>
					{{isNullMessage}}


					<div @drop="drop($event)" @dragover="allowDrop($event)" style="width: 100p;height: 50px;border: 2px solid #20222A;"
					 class="droptarget"></div>

					<p id="demo"></p>

				</div>
			</div>

		</section>
	</div>
</template>

<script>
	import axios from 'axios'
	import ElementUI from 'element-ui'
	import 'element-ui/lib/theme-chalk/index.css'
	import Vue from 'vue'
	import { resetRouter } from '@/router'

	Vue.use(ElementUI)


	export default {


		data() {
			return {
				userName: 'scott',


				index: [],
				index2: [],
				index3: [],

				fileName: '/',
				isNullMessage: '',


				fileID: '',





				url: '/api/file/filelist?userName=scott&parentPath=',


				oldURL: '/api/file/filelist?userName=scott&parentPath=',
				newURL: '',
				moveFileURL: '/api/file/movefile?userName=scott',

				showMenu: 'true',


				movedFileCategory: '',
				movedFileID: '',
				movedFileOldPath: '',
				movedFold: '',
				targetFold: '',

				currentURL: '',
				refreshURL: '',
			}
		},


		watch: {
			isNULL(response) {
				if (response = "") {
					windows.alert("空文件夹！")
				}
			}
		},

		methods: {

			//文件夹内跳转
			submit(PATH) {
				// window.alert(PATH);
				if (PATH == '/') {
					this.index2 = [];
					this.newURL = '/api/file/filelist?userName=scott&parentPath=/'
				} else {
					this.index2.push(PATH);
					if (this.newURL != '/api/file/filelist?userName=scott&parentPath=/')
						this.newURL = this.newURL + ('/' + PATH.toString());
					else
						this.newURL = this.newURL + PATH.toString();
				}

				console.log(this.newURL)
				this.request(this.newURL);

			},


			//查询请求
			request(URL) {
				axios({
					method: 'post',
					url: URL,
				}).then(response => {
					this.currentURL = URL
					this.index = response.data;
					// console.log(response.data);
					// this.isNULL(response.data);
				});
			},


			//移动文件夹的请求
			requestMoveFile(URL) {
				axios({
					method: 'post',
					url: URL,
				}).then(response => {
					this.currentURL = URL
				});
			},


			//判断是否为空
			isNULL(response) {
				if (response == null) {
					this.isNullMessage = '空文件夹'
					this.showMenu = 'false'
				} else {
					this.isNullMessage = '共有' + this.index.length + '个文件'
					this.showMenu = 'true'
				}
				console.log("showMenu:" + this.showMenu)
			},


			//返回上一级
			back() {
				this.index2.pop();
				this.oldURL = '/api/file/filelist?userName=scott&parentPath='

				if (this.index2 == '') {
					this.oldURL = '/api/file/filelist?userName=scott&parentPath=/'
				} else {
					this.index2.forEach(name => {
						this.oldURL += ('/' + name)
					})
				}

				this.newURL = this.oldURL
				this.request(this.oldURL)
				this.oldURL == this.url

			},


			//导航栏处的页面跳转
			jump(name, index) {

				this.oldURL = this.url
				this.newURL = this.url

				for (var i = 0; i < index + 1; i++) {
					console.log(this.index2[i])
					this.oldURL = this.oldURL + '/' + this.index2[i].toString()
					this.index3.push(this.index2[i].toString())
				}

				for (var i = 0; i < index + 1; i++) {
					this.newURL = this.newURL + '/' + this.index2[i].toString()
				}
				this.index2 = this.index3
				this.index3 = []
				console.log(this.oldURL)
				this.request(this.oldURL)
				this.oldURL = this.url
			},


			//新建文件夹
			newFileFolder() {

			},



			//移动文件部分
			//开始移动
			dragstart(ev, data) {
				// console.log("开始拖动啦");		
				this.movedFold = data.FileName
				this.movedFileCategory = data.Category
				this.movedFileID = data.FileID
				this.movedFileOldPath = data.FilePath
				// console.log('被移动的文件夹夹是:'+this.movedFold)
				// ev.dataTransfer.setData('blockContent', "我是消息本体！");
			},

			//放下文件
			drop(ev, data) {
				// console.log("开始放下啦");
				this.targetFold = ev.target.textContent
				// console.log('拖放结束的文件夹名：'+ this.targetFold)
				this.moveFolder(data)
				// console.log(ev.dataTransfer.getData('blockContent'));
			},

			//默认情况下,数据/元素不能在其他元素中被拖放。对于drop须防止元素的默认处理
			allowDrop(ev) {
				ev.preventDefault();
			},




			//移动文件
			moveFolder(data) {

				if (this.movedFold == this.targetFold) {
					console.log('不能移动文件给自己！')
				} else {
					this.refreshURL = this.currentURL
					// console.log("movedFileOldPath: "+this.movedFileOldPath)

					this.moveFileURL += (
						'&path=' + data.FilePath +
						'&category=' + this.movedFileCategory +
						'&fileID=' + this.movedFileID +
						'&fileName=' + this.movedFold +
						'&newPath='
					)

					if (this.movedFileOldPath == '/') {
						this.moveFileURL += '/' + this.targetFold
					} else {
						this.moveFileURL += this.movedFileOldPath + '/' + this.targetFold
					}


					//移动文件后删除对应的旧文件名字
					for (var i = 0; i < this.index.length; i++) {
						if (this.index[i].FileName == this.movedFold) {
							// console.log(i)
							this.index.splice(i, 1)
						}
					}


					console.log('调用移动文件方法：' + this.moveFileURL)
					this.requestMoveFile(this.moveFileURL)
					this.moveFileURL = '/api/file/movefile?userName=scott'
					this.movedFileOldPath = ''
					// console.log("refreshURL:"+this.refreshURL)
					// this.request(this.refreshURL)
				}

			},

			//删除文件
			deleteFile() {
				console.log('删除文件！')
			},



			//退出
			logout(){
				resetRouter()
				this.$router.push({ name: 'login' })
			},
			


			//文件上传
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},

			handlePreview(file) {
				console.log(file);
			},

			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},

			beforeRemove(file, fileList) {
				return this.$confirm(`确定删除 ${ file.name }？`);
			},


		},

		created() {
			// console.log("created调用成功")
			this.index2 = []
			this.newURL = this.url + '/'
			this.request(this.newURL)
		}

	}






	// /* 拖动时触发*/
	// document.addEventListener("dragstart", function(event) {
	//     //dataTransfer.setData()方法设置数据类型和拖动的数据
	// 	event.target.style.color = 'blue';
	//     event.dataTransfer.setData("Text", event.target.id);
	// 	event.dataTransfer.setData("FileName", event.target.innerText);
	//     // 拖动 p 元素时输出一些文本
	//     document.getElementById("demo").innerHTML = "移动文件夹";    
	//     //修改拖动元素的透明度
	//     event.target.style.opacity = "0.4";

	// 	var fileName = event.dataTransfer.getData("FileName");

	// 	this.movedFold = fileName.toString()
	// 	console.log('被移动的文件夹夹是:'+this.movedFold)
	// });
	// //在拖动p元素的同时,改变输出文本的颜色
	// document.addEventListener("drag", function(event) {
	//     document.getElementById("demo").style.color = "royalblue";
	// });
	// // 当拖完p元素输出一些文本元素和重置透明度
	// document.addEventListener("dragend", function(event) {

	// 	// console.log('移动文件夹成功'+event.target.text)
	//     document.getElementById("demo").innerHTML = "移动文件夹成功！";
	//     event.target.style.opacity = "1";
	// });


	// /* 拖动完成后触发 */
	// // 当文件夹完成拖动进入droptarget,改变div的边框样式
	// document.addEventListener("dragenter", function(event) {
	//     if ( event.target.className == "droptarget" ) {
	//         event.target.style.border = "3px dotted red";
	//     }
	// });
	// // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop须防止元素的默认处理
	// document.addEventListener("dragover", function(event) {
	//     event.preventDefault();
	// });
	// // 当可拖放的p元素离开droptarget，重置div的边框样式
	// document.addEventListener("dragleave", function(event) {
	//     if ( event.target.className == "droptarget" ) {
	//         event.target.style.border = "";
	//     }
	// });

	// /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
	// 复位输出文本的颜色和DIV的边框颜色
	// 利用dataTransfer.getData()方法获得拖放数据
	// 拖拖的数据元素id(“drag1”)
	// 拖拽元素附加到drop元素*/
	// document.addEventListener("drop", function(event) {
	//     event.preventDefault();
	//     if ( event.target.className == "droptarget" ) {
	//         document.getElementById("demo").style.color = "";
	//         event.target.style.border = "";

	//         // var data = event.dataTransfer.getData("Text");

	// 		this.targetFold = event.target.textContent
	// 		console.log('拖放结束的文件夹名：'+ this.targetFold)

	// 		document.getElementById("dragtarget").style.color = 'black';
	// 		window.deleteFile()
	// 		// that.$options.methods.moveFolder()

	//     }
	// });
</script>



<style>
	.index-vue {
		height: 100%;
		color: #666;
	}

	/* 侧边栏 */
	aside {
		position: fixed;
		top: 0;
		left: 0;
		width: 90px;
		background: #20222A;
		height: 100%;
		transition: width .3s;
		overflow: auto;
	}

	.logo-c {
		display: flex;
		align-items: center;
		color: rgba(255, 255, 255, .8);
		font-size: 16px;
		margin: 20px 0;
		justify-content: center;
	}

	.logo {
		width: 40px;
		margin-right: 10px;
	}

	.aside-big {
		width: 220px;
	}

	/* 主体页面 */
	.sec-right {
		height: 100%;
		margin-left: 220px;
		transition: margin-left .3s;
		overflow: hidden;
		;
		background: #f3f7fd;
	}

	/* 主体页面头部 */
	header {
		height: 50px;
		border-bottom: none;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 40px;
		padding-left: 10px;
		font-size: 14px;
	}

	header .ivu-icon {
		font-size: 24px;
	}

	.refresh-c {
		margin: 0 30px;
		cursor: pointer;
	}

	.h-right {
		display: flex;
		align-items: center;
	}

	.h-left {
		display: flex;
		align-items: center;
	}

	/* 标签栏 */
	.ul-c {
		height: 34px;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 10px;
		overflow: hidden;
		width: 100%;

		font-size: 20px;
	}

	.ul-c li {
		/* border-radius: 3px; */
		cursor: pointer;
		font-size: 30px;
		height: 24px;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin: 3px 5px 2px 3px; */
		border: 1px solid #e6e6e6;
	}

	a {
		color: #666;
		transition: none;
	}

	.li-a {
		max-width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ul-c .ivu-icon {
		margin-left: 6px;
	}

	.active {
		background: #409eff;
		border: 1px solid #409eff;
	}

	.active a {
		color: #fff;
	}

	.active .ivu-icon {
		color: #fff;
	}

	/* 主要内容区域 */
	.main-content {
		height: calc(100% - 88px);
		overflow: hidden;
		font-size: 25px;
	}

	.view-c {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.droptarget {
		/* float: left; */
		width: 100px;
		/* height: 35px; */
		/* margin: 15px; */
		/* padding: 10px; */
		border: 1px solid #aaaaaa;
	}
</style>
